<!DOCTYPE html>
<html lang="en">
<head>
	<#include "static/top.ftl" >
    <link rel="stylesheet" href="/res/assets/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="/res/assets/css/jquery.webui-popover.min.css">
    <link rel="stylesheet" href="/res/assets/css/bootstrap-select.css">
    <#--  <link rel="stylesheet" href="/res/libs/misc/datatables/datatables.min.css">  -->
    <link rel="stylesheet" href="/res/assets/css/bootstrap-table.css">

    <style type="text/css">
        table.dataTable thead .sorting:after {
            opacity: 0.2;
            content: "\f0dc";
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort */
        }

        table.dataTable thead .sorting_asc:after {
            content: "\f0de";
            color: #337ab7;
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort-by-attributes */
        }

        table.dataTable thead .sorting_desc:after {
            content: "\f0dd";
            color: #337ab7;
        / / padding-right: 50 px;
            font-family: FontAwesome;
            /* sort-by-attributes-alt */
        }

        table.dataTable td {
            text-align: center;
        }

        table.dataTable th {
            text-align: center;
        }

        /*显示图片摘要*/
        .product-caption2 {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(99, 94, 86,0.7);
            padding: 5px 5px;
            font-weight: 600;
            color: #fff;
            display: block;
        }
    </style>
</head>

<body class="menubar-left menubar-unfold menubar-light theme-primary">
<!--============= start main area -->

<!-- APP NAVBAR ==========-->



<#include "static/header.ftl" >

<!--========== END app navbar -->

<!-- APP ASIDE ==========-->


<#include "static/menu.ftl" >
<!--========== END app aside -->

<!-- navbar search -->

<!-- 模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">XX品类过去12个月销售额趋势</h4>
                <div class="pull-right">
                    <select class="form-control" id="selectCategory2">
                        <option value="0">客单数</option>
                        <option value="1">销售额</option>
                        <option value="2">店铺数</option>
                        <option value="3">客单价</option>
                    </select>
                </div>
            </div>
            <div class="modal-body">
                <div id="category2" style="height: 300px"></div>
            </div>
        </div>
    </div>
</div>
<!-- APP MAIN ==========-->
<main id="app-main" class="app-main">
    <div class="wrap">
        <section class="app-content">
        <#--筛选框-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">
                                <form class="form-inline">
                                    <div class="form-group">
                                        <label>起始月份</label>
                                        <div class="input-group date datepicker" data-provide="datepicker" id="start_datapicker">
                                            <input type="text" class="form-control" placeholder="时间" id="start_date">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>结束月份</label>
                                        <div class="input-group date datepicker" data-provide="datepicker">
                                            <input type="text" class="form-control" placeholder="时间" id="end_date">
                                            <div class="input-group-addon">
                                                <span class="glyphicon glyphicon-th"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label>城市级别</label>
                                        <select class="form-control" id="cityTier_select">

                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn rounded btn-default" id="search"
                                                style="background-color: #ba1b20;color: white;border-color: #ba1b20">确认
                                        </button>
                                    </div>
                                </form>
                            </h4>
                        </header>
                    </div>
                </div>
            </div>

            <div class="row" id="overviews_div">
            <#--总览1-->
                <div class="col-md-4 col-sm-6">
                    <div class="widget stats-widget">
                        <header class="widget-header">
                            <h4 class="widget-title">销售额</h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div style="padding-bottom: 15px">
                            <table class="tab_asc">
                                <tr style="border-bottom:3px solid #ba1b20">
                                    <td></td>
                                    <td>
                                        <small>环比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td>
                                        <small>同比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td style="min-width: 30px"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">总体：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="overview_sales">- </span>元
                                        </div>
                                    </td>
                                    <td>
                                        <div id="overview_sales_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="overview_sales_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">WQSR：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="w_sales">- </span>元
                                        </div>
                                    </td>
                                    <td>
                                        <div id="w_sales_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="w_sales_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">Pizza&Pasta：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="p_sales">- </span>元
                                        </div>
                                    </td>
                                    <td>
                                        <div id="p_sales_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="p_sales_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div><!-- .widget -->
                </div>
            <#--总览2-->
                <div class="col-md-4 col-sm-6">
                    <div class="widget stats-widget">
                        <header class="widget-header">
                            <h4 class="widget-title">客单数</h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div style="padding-bottom: 15px">
                            <table class="tab_asc">
                                <tr  style="border-bottom:3px solid #ba1b20">
                                    <td></td>
                                    <td>
                                        <small>环比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td>
                                        <small>同比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td style="min-width: 30px"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">总体：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="overview_tc">- </span>笔
                                        </div>
                                    </td>
                                    <td>
                                        <div id="overview_tc_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="overview_tc_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">WQSR：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="w_tc">- </span>笔
                                        </div>
                                    </td>
                                    <td>
                                        <div id="w_tc_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="w_tc_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">Pizza&Pasta：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="p_tc">- </span>笔
                                        </div>
                                    </td>
                                    <td>
                                        <div id="p_tc_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="p_tc_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div><!-- .widget -->
                </div>
            <#--总览3-->
                <div class="col-md-4 col-sm-6">
                    <div class="widget stats-widget">
                        <header class="widget-header">
                            <h4 class="widget-title">店铺数</h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div style="padding-bottom: 15px">
                            <table class="tab_asc">
                                <tr  style="border-bottom:3px solid #ba1b20">
                                    <td></td>
                                    <td>
                                        <small>环比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td>
                                        <small>同比增长 
                                        <#--  <i class="glyphicon glyphicon-arrow-up"></i>  -->
                                        </small>
                                    </td>
                                    <td style="min-width: 30px"></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">总体：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="overview_store">- </span>家
                                        </div>
                                    </td>
                                    <td>
                                        <div id="overview_store_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="overview_store_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">WQSR：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="w_store">- </span>家
                                        </div>
                                    </td>
                                    <td>
                                        <div id="w_store_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="w_store_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div style="font-weight: bold;color:#ba1b20">Pizza&Pasta：</div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <span class="counter" data-plugin="counterUp" id="p_store">- </span>家
                                        </div>
                                    </td>
                                    <td>
                                        <div id="p_store_mom"><span>-</span>%</div>
                                    </td>
                                    <td>
                                        <div id="p_store_yoy"><span>-</span>%</div>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    <#--<span class="pull-right big-icon watermark"><i class="fa fa-institution wm_icon"></i></span>-->
                    </div>
                </div>
            </div><!-- .row -->

            <div class="row">
            <#--月度趋势-->
                <div class="col-md-6 col-sm-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget1">月度趋势
                                <button type="button" class="pull-right btn rounded btn-default">店铺数
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default">销售额
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default button_active">客单数
                                </button>&nbsp;
                                <div class="col-sm-4 pull-right">
                                    <select class="form-control" id="mapSearchMonth">
                                        <option value="6" selected>过去6个月</option>
                                        <option value="12">过去12个月</option>
                                        <option value="18">过去18个月</option>
                                        <option value="24">过去24个月</option>
                                    </select>
                                </div>
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div id="sales" class="my_chart">

                            </div>
                        </div>
                    </div>
                </div>

            <#--热门城市-->
                <div class="col-md-6 col-sm-12">
                    <div class="widget countries-widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget2">热门城市占比
                                <button type="button" class="pull-right btn rounded btn-default">店铺数
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default">销售额
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default button_active">客单数
                                </button>&nbsp;
                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div id="city" class="my_chart">

                            </div>
                        </div><!-- .widget-body -->
                    </div>
                </div>

            </div>


            <div class="row">
            <#--平台-->
                <div class="col-md-5 col-sm-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget3">不同平台份额
                                <button type="button" class="pull-right btn rounded btn-default">店铺数
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default">销售额
                                </button>&nbsp;
                                <button type="button" class="pull-right btn rounded btn-default button_active">客单数
                                </button>&nbsp;
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div id="platform" class="my_chart">

                            </div>
                        </div>
                    </div>
                </div>
            <#--品类-->
            <#--<div class="col-md-7 col-sm-12">-->
            <#--<div class="widget">-->
            <#--<header class="widget-header">-->
            <#--<h4 class="widget-title" id="widget5">不同店铺品类占比-->
            <#--<button type="button" class="pull-right btn rounded btn-default">店铺数-->
            <#--</button>&nbsp;-->
            <#--<button type="button" class="pull-right btn rounded btn-default">销售额-->
            <#--</button>&nbsp;-->
            <#--<button type="button" class="pull-right btn rounded btn-default button_active">客单数-->
            <#--</button>&nbsp;-->
            <#--<div class="col-sm-2 pull-right">-->
            <#--<select class="form-control" id="cateSelect">-->
            <#--<option value="1" selected>大类</option>-->
            <#--<option value="2">细分类</option>-->
            <#--</select>-->
            <#--</div>-->
            <#--</h4>-->
            <#--</header>-->
            <#--<hr class="widget-separator">-->
            <#--<div class="widget-body">-->
            <#--<div id="shops" class="my_chart">-->

            <#--</div>-->
            <#--</div>-->
            <#--</div>-->
            <#--</div>-->
            <#----------------------------------店铺品类销售情况------------------------------------------->
                <div class="col-md-7 col-sm-12" style="padding-left:0px">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">店铺品类销售汇总
                                <button type="button" style="visibility:hidden"
                                        class="pull-right btn rounded btn-default" id="hide">销售额
                                </button>
                            </h4>
                        </header>
                        <hr class="widget-separator">
                        <div class="widget-body" style="text-align: center;">
                            <div id="table_div" style="overflow-y:scroll;height:265px">
                                <table data-detail-view="true" id="compareplatform1" style="height:245px">

                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        <#--热门品牌-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">热门品牌占比

                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div class="table-responsive">
                                <div class="col-sm-1">
                                <#--<label>城市级别</label>-->
                                    <select class="form-control" id="cityTier">

                                    </select>
                                </div>
                                <div class="col-sm-1">
                                <#--<label>城市</label>-->
                                    <select class="form-control" id="matchCityTier">

                                    </select>
                                </div>
                                <div class="col-sm-1">
                                <#--<label>品类</label>-->
                                    <select class="form-control" id="matchCate">
                                        <option value="奶茶果汁">奶茶果汁</option>
                                        <option value="面包">面包</option>
                                        <option value="日韩料理">日韩料理</option>
                                        <option value="粥面点心">粥面点心</option>
                                        <option value="炸鸡">炸鸡</option>
                                        <option value="中式简餐" selected>中式简餐</option>
                                        <option value="地方菜">地方菜</option>
                                        <option value="火锅烤鱼">火锅烤鱼</option>
                                        <option value="海鲜烧烤">海鲜烧烤</option>
                                        <option value="香锅麻辣烫">香锅麻辣烫</option>
                                        <option value="色拉西餐">色拉西餐</option>
                                        <option value="汉堡">汉堡</option>
                                        <option value="披萨">披萨</option>
                                        <option value="东南亚菜">东南亚菜</option>
                                        <option value="冰淇淋">冰淇淋</option>
                                        <option value="咖啡">咖啡</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <button type="button" class="btn rounded btn-default button_active"
                                            id="topBrandSearch">确认
                                    </button>
                                </div>
                                <table id="default-datatable" data-plugin="DataTable" class="table table-striped"
                                       cellspacing="0" width="100%">
                                    <thead  style="border-bottom:3px solid #ba1b20">
                                    <tr>
                                        <th style="width: 156px">品牌</th>
                                        <th>店铺数(家)</th>
                                        <th>销售额(百万元)</th>
                                        <th>客单数(笔)</th>
                                        <th>客单数占比(%)</th>
                                        <th>客单数环比增长率(%)</th>
                                        <th>客单数同比增长率(%)</th>
                                        <th>客单价(元)</th>
                                    <#--<th>店铺间销售额方差</th>-->
                                    </tr>
                                    </thead>
                                    <tbody id="topBrandTable">

                                    </tbody>
                                </table>
                            </div>
                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div><!-- END column -->
            </div>

        <#--地图-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">外卖销售热点图
                                <div class="col-sm-3 pull-right" id="widget7">
                                    <button type="button" class="pull-right btn rounded btn-default">
                                        商圈容量
                                    </button>&nbsp;
                                    <button type="button" class="pull-right btn rounded btn-default">客单价
                                    </button>&nbsp;
                                    <button type="button" class="pull-right btn rounded btn-default button_active">销售额
                                    </button>&nbsp;
                                </div>
                                <div class="col-sm-4 pull-right">
                                    <select class="selectpicker" id="mapBrandSelect" data-live-search="true"
                                            data-max-options="3" title="请选择品牌 (可多选)" multiple>
                                        <option value="肯德基" data-tokens="kfc kentucky fried chicken 肯德基">肯德基</option>
                                        <option value="必胜客" data-tokens="pizza hut ph 必胜客">必胜客</option>
                                        <option value="必胜宅急送" data-token="pizza hut home service delivery">必胜宅急送
                                        </option>
                                        <option value="麦当劳" data-tokens="mcd mcdonald 麦当劳">麦当劳</option>
                                        <option value="汉堡王" data-tokens="burger king 汉堡王">汉堡王</option>
                                        <option value="德克士" data-tokens="dicos">德克士</option>
                                        <option value="华莱士" data-tokens="hualaike">华莱士</option>
                                        <option value="赛百味" data-tokens="subway">赛百味</option>
                                        <option value="棒约翰" data-tokens="papa john">棒约翰</option>
                                        <option value="达美乐" data-tokens="domino's pizza">达美乐</option>
                                        <option value="尊宝" data-tokens="pizza">尊宝</option>
                                        <option value="乐凯撒" data-tokens="乐凯撒">乐凯撒</option>
                                        <option value="芝根芝底" data-tokens="芝根芝底">芝根芝底</option>
                                        <option value="pizza4u" data-tokens="pizza4u">pizza4u</option>
                                    </select>
                                    <input type="checkbox" id="ifShowShop" style="vertical-align: middle">
                                    <font style="font-size: 15px;vertical-align: middle;">显示店铺</font>
                                    <button type="button" class="btn rounded btn-default button_active"
                                            id="mapSearchBtn">
                                        确认
                                    </button>
                                </div>
                                <div class="col-sm-3 pull-right">
                                    <input class="form-control" id="mapSearchInput" type="text"
                                           placeholder="输入地址以查询...">
                                </div>
                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body" id="mapDiv" style="height: 500px">

                        </div><!-- .widget-body -->
                    <#--<div class="map-button-group">-->
                    <#--<input id="mapObjButton" type="button" class="map-button" value="显示 / 隐藏图钉">-->
                    <#--</div>-->
                    </div><!-- .widget -->
                </div>
            </div>

        <#--网红-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget products-widget">
                        <header class="widget-header">
                            <h4 class="widget-title" id="widget6">网红菜品
                            <#--<button type="button" class="pull-right btn rounded btn-default">咖啡</button>&nbsp;-->
                            <#--<button type="button" class="pull-right btn rounded btn-default">非中式餐厅-->
                            <#--</button>&nbsp;-->
                                <button type="button" class="pull-right btn rounded btn-default button_active "
                                        style="display: none">
                                    西式快餐
                                </button>&nbsp;
                            <#--<button type="button" class="pull-right btn rounded btn-default">甜品饮料-->
                            <#--</button>&nbsp;-->
                            <#--<button type="button" class="pull-right btn rounded btn-default">-->
                            <#--中式餐厅-->
                            <#--</button>&nbsp;-->
                            <#--<button type="button"-->
                            <#--class="pull-right btn rounded btn-default button_active">中式快餐-->
                            <#--</button>&nbsp;-->
                            </h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">
                            <div class="row" id="wanghong">

                            </div><!-- .row -->
                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div><!-- END column -->
            </div>

        <#--新闻-->
            <div class="row">
                <div class="col-md-12">
                    <div class="widget">
                        <header class="widget-header">
                            <h4 class="widget-title">行业热点新闻</h4>
                        </header><!-- .widget-header -->
                        <hr class="widget-separator">
                        <div class="widget-body">

                            <div class="row m-b-lg">
                                <div class="col-md-6">
                                    <div class="search-result">
                                        <h5>
                                            <a href="http://op.inews.qq.com/m/20180707A0A2W400?refer=100000355&chl_code=kb_news_tech&h=0"
                                               class="_fz_md" style="color: #ba1b20" target="_blank">餐饮外卖竞争进入大数据定制化产品时代？</a>
                                        </h5>
                                        <p>发布时间：2018-07-07 来源：南方都市报</p>
                                    </div>

                                    <div class="search-result">
                                        <h5>
                                            <a href="http://news.sina.com.cn/c/2018-07-06/doc-ihexfcvk7768751.shtml"
                                               class="_fz_md" style="color: #ba1b20" target="_blank">德克士在饿了么首发魔兽世界汉堡套餐 将发展外卖定制餐品
                                        </a>
                                        </h5>
                                        <p>发布时间：2018-07-06 来源：新京报</p>
                                    </div>

                                    <div class="search-result">
                                        <h5>
                                            <a href="http://field.10jqka.com.cn/20180709/c605557820.shtml" class="_fz_md"
                                               style="color: #ba1b20" target="_blank">新零售赋能传统餐饮 德克士有25%订单来自外卖业务
                                        </a></h5>
                                        <p>发布时间：2018-07-09 来源：21世纪经济报道
                                        </p>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="search-result">
                                        <h5><a href="http://sh.people.com.cn/n2/2018/0706/c134768-31787537.html"
                                               class="_fz_md" style="color: #ba1b20" target="_blank">智慧餐饮：大数据精准营销促外卖升级
                                        </a>
                                        </h5>
                                        <p>发布时间：2018-07-06 来源：金羊网
                                        </p>
                                    </div>

                                    <div class="search-result">
                                        <h5><a href="http://www.soozhu.com/article/352651/"
                                               class="_fz_md" style="color: #ba1b20" target="_blank">德克士联手饿了么“发大招” 首席数字官这么评价肯德基和麦当劳的外卖策略
                                        </a>
                                        </h5>
                                        <p>发布时间：2018-07-11 来源：小食代
                                        </p>
                                    </div>

                                    <div class="search-result">
                                        <h5><a href="http://www.jiaodong.net/food/system/2018/06/09/013691068.shtml"
                                               class="_fz_md" style="color: #ba1b20" target="_blank">麦当劳外送包装全面升级 承诺30分钟必达
                                        </a></h5>
                                        <p>发布时间：2018-06-09 来源：大洋网
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- search results navigation -->
                            <nav class="search-results-navigation">
                                <ul class="pagination m-0">
                                    <li>
                                        <a href="javascript:void(0)" aria-label="Previous" style="color: #ba1b20">
                                            <span aria-hidden="true"><i class="fa fa-chevron-left"></i></span>
                                        </a>
                                    </li>
                                    <li><a href="javascript:void(0)" style="color: #ba1b20">1</a></li>
                                    <li>
                                        <a href="javascript:void(0)" aria-label="Next" style="color: #ba1b20">
                                            <span aria-hidden="true"><i class="fa fa-chevron-right"></i></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav><!-- END search-results-navigation -->


                        </div><!-- .widget-body -->
                    </div><!-- .widget -->
                </div><!-- END column -->
            </div>
        </section><!-- #dash-content -->
    </div><!-- .wrap -->
    <!-- APP FOOTER -->
    <div id="tmp_div"></div>
<#----------------------------------模态框------------------------------------------->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">XX品类过去12个月销售额趋势</h4>
                    <div class="pull-right">
                        <select class="form-control" id="selectCategory">
                            <option value="0">客单数</option>
                            <option value="1">销售额</option>
                            <option value="2">店铺数</option>
                            <option value="3">客单价</option>
                        </select>
                    </div>
                </div>
                <div class="modal-body">
                    <div id="category" style="height:300px;width:100%"></div>
                </div>
            </div>
        </div>
    </div>

<#include "static/footer.ftl" >
    <script src="/res/assets/js/bootstrap-datepicker.js"></script>
    <script src="/res/assets/js/bootstrap-select.js"></script>

</main>
<!--========== END app main -->
<script type="text/javascript"
        src='http://webapi.amap.com/maps?v=1.4.3&key=9fa8c62b85a987698a515fbddee8efa7&&plugin=AMap.ToolBar,AMap.ControlBar'></script>
<script src="/res/assets/js/jquery.webui-popover.min.js"></script>
<script type="text/javascript" src='../res/assets/js/heatmap.js'></script>
<script src="/res/libs/misc/datatables/datatables.min.js"></script>
<script src="/res/assets/js/bootstrap-table.js"></script>
<script>
    COLOR = ['#f9c851', '#188ae2', '#ff5b5b'];
    PLATFORM = ['美团外卖', '饿了么', '百度外卖'];

    var BY_CHANNEL_DATA = [];
    var BY_SUBCATE_DATA = [];
    var MONTHLY_SALES_DATA = [];
    var BY_CITY_DATA = [];
    var CITY_DATA_TMP = [];
    var TIP_DATA = {};
    var CITY_TIER_NAME_LIST = [];
    var widget1Btn = $("#widget1 button");
    var widget2Btn = $("#widget2 button");
    var widget3Btn = $("#widget3 button");
    var widget5Btn = $("#widget5 button");
    var widget6Btn = $("#widget6 button");
    var widget7Btn = $("#widget7 button");
    var cityTierNameSelect = $("#cityTier");
    var matchCityTierSelect = $("#matchCityTier");
    var myChart1;
    var myChart2;
    var myChart3;
    var myChart4;
    var myChart5;
    var heatMap;
    var mapIndex = 2;
    var mapMarker = [];
    var colorArray = ['#ffcd96;', '#97ffa2;', '#00bcff;'];
    var capacityObj = {lng: -1, lat: -1};
    var defaultMonth = new Date().Format('yyyyMM');
    $(function () {
        //浮窗提示一下（“点击查看过去十二个月的趋势”）
        $('#name_tooltip').tooltip();
        //模态框  统计下拉框
        $("#selectCategory2").val("0")
        $("#selectCategory2").change(function () {
            getCategoryChart($("#selectCategory2").val(), CATE_TYPE);
        });
        // 模态框打开后再渲染
        $('#myModal2').on('shown.bs.modal', function () {
            $("#selectCategory2").val("0")
            getCategoryChart(0, CATE_TYPE);
        })
        //销售额 表格样式设置
        $(".tab_asc").css({
            "width": "100%",
            "font-size": "16px",
        })
        $(".tab_asc tr").css({
            "height": "35px",
            "text-align": "right",
        })
        $(".tab_asc tr:not(:first) td:first-child").css({
            "padding-left": "15px",
            "text-align": "left",
            "width": "33%"
        })
        $(".tab_asc tr td:last-child").css({
            "padding-right": "0px",
        })

        var username = '${user_name}';
        $("#userName").html(username);
        $(".app-menu li").each(function () {
            $(this).removeAttr("class");
        });
        $(".app-menu li a").each(function () {
            $(this).removeAttr("style");
        });
        $("#menu_dashboard").attr("class", "active");
        $("#menu_dashboard a").attr("style", "color: #ba1b20");
        $("#nav_bar").append("<li>\n" +
                "                    <a class=\"page-title hidden-menubar-top hidden-float\" style='color: white'>/总体概况</a>\n" +
                "                </li>");
        $('.datepicker').datepicker({
            format: 'yyyy-mm',
            startView: 1,
            todayHighlight: true,
            maxViewMode: 'years',
            minViewMode: 'months',
            endDate: new Date().Format('yyyyMM')
        });
        myChart1 = echarts.init(document.getElementById("sales"));
        myChart2 = echarts.init(document.getElementById("city"));
        myChart3 = echarts.init(document.getElementById("platform"));
        // myChart5 = echarts.init(document.getElementById("shops"));
        getCityTierView();
        getLatestMonth();
        getCityTierName();

        var toolBar = new AMap.ControlBar({//new AMap.ToolBar
            showZoomBar: true,
            showControlButton: true,
            visible: true
        });
        var map = new AMap.Map('mapDiv', {
            viewMode: '3D',
            pitch: 35,
            resizeEnable: true,
            zoom: max_map_level,
            center: [121.45, 31.22],
            zoomEnable: true,
            dragEnable: true,
            zooms: [min_map_level, max_map_level],
            pitchEnable: true,
            buildingAnimation: true//楼块出现是否带动画
        });
        map.addControl(toolBar);
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
            var autoOptions = {
                city: 310115, //城市，默认全国
                input: "mapSearchInput"//使用联想输入的input的id
            };
            autocomplete = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                city: '上海',
                map: map
            });
            AMap.event.addListener(autocomplete, "select", function (e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name, function () {
                    capacityObj.lng = -1;
                    capacityObj.lat = -1;
                    try {
                        //针对具体地址
                        map.setZoomAndCenter(max_map_level, [e.poi.location.lng, e.poi.location.lat]);
                        capacityObj.lng = e.poi.location.lng;
                        capacityObj.lat = e.poi.location.lat;
                    } catch (e1) {
                        //针对城市
                        map.setCity(e.poi.adcode);
                    }
                    autoOptions.city = e.poi.adcode;
                    generateHeatMap(mapIndex);
                });
            });
            //对地图移动结束的事件进行监听，地图移动结束之后，触发地图变化的操作
            // var moveEndEventListener = map.on('moveend', function (e) {
            //     generateHeatMap(mapIndex);
            // });
            //对mapBrandSelect/mapSearchBtn元素进行监听，当此元素改变/点击时，触发地图变化的操作
            AMap.event.addDomListener(document.getElementById("mapSearchBtn"), "click", function (e) {
                generateHeatMap(mapIndex);
            });
        });

        //根据中心点坐标生成热力图
        function generateHeatMap(index) {
            mapMarker = [];
            map.clearMap();
            var heatmapOpts = {
                //3d 相关的参数
                '3d': {
                    //热度转高度的曲线控制参数，可以利用左侧的控制面板获取
                    heightBezier: [0.4, 0.2, 0.4, 0.8],
                    //取样精度，值越小，曲面效果越精细，但同时性能消耗越大
                    gridSize: 6,
                    heightScale: 1
                }
            };
            map.plugin(["AMap.Heatmap"], function () {
                //初始化heatmap对象
                if (typeof heatMap === 'undefined') {
                    // heatMap = new AMap.Heatmap(map, {
                    //     radius: 30, //给定半径
                    //     opacity: [0, 0.9],
                    //     gradient: {
                    //         0.2: '#1bff13',
                    //         0.5: '#279eff',
                    //         0.8: '#ffc83e',
                    //         0.9: '#ff7a22',
                    //         1.0: '#ff2825'
                    //     }
                    // });
                    heatMap = new AMap.Heatmap(map, heatmapOpts);
                }
                //清空热力图
                heatMap.setDataSet({
                    max: 0,
                    data: []
                });
            });

            var points = [];
            var max = 0;
            var infoWindow = new AMap.InfoWindow({
                closeWhenClickMap: true,
                isCustom: true,
                offset: new AMap.Pixel(0, -30)
            });

            var bounds = map.getBounds();
            // var max_lng = bounds.northeast.lng;
            // var min_lng = bounds.southwest.lng;
            // var max_lat = bounds.northeast.lat;
            // var min_lat = bounds.southwest.lat;
            var max_lng = bounds.bounds[1].lng;
            var min_lng = bounds.bounds[3].lng;
            var max_lat = bounds.bounds[1].lat;
            var min_lat = bounds.bounds[3].lat;

            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var brandName = $("#mapBrandSelect").val() == null ? null : $("#mapBrandSelect").val().join(",");

            if (brandName === null || startMonth === null || endMonth === null) {
                return;
            }

            //商圈容量数据暂无，暂时处理
            if (index === 3) {
                var lng, lat;
                if (capacityObj.lng === -1 && capacityObj.lat === -1) {
                    lng = min_lng + (max_lng - min_lng) / 2;
                    lat = min_lat + (max_lat - min_lat) / 2;
                } else {
                    lng = capacityObj.lng;
                    lat = capacityObj.lat;
                }

                $.ajax({
                    type: "GET",
                    url: "/service/data/get_map_overview_result_by_capacity?" +
                    "start_month=" + startMonth + "&end_month=" + endMonth + "&brand_name="
                    + encodeURIComponent(brandName)
                    + "&lng=" + lng + "&lat=" + lat,
                    success: function (res) {
                        if (res.code === "suc") {
                            var realData = res.data;
                            var checked = 1, visivle = true;
                            var otherColor = [];

                            $("#ifShowShop").prop("checked", true);
                            for (var i = 0; i < realData.length; i++) {
                                var marker_icon = '';
                                var shopInfo = "";

                                //如果是指定的店铺，则用对应的颜色，否则从颜色数组里取一个，相同品牌用相同的颜色
                                if (realData[i].brand === '肯德基') {
                                    marker_icon = "<div class='kfc_pushpin'></div>";
                                } else if (realData[i].brand === '必胜客') {
                                    marker_icon = "<div class='ph_pushpin'></div>";
                                } else if (realData[i].brand === '必胜宅急送') {
                                    marker_icon = "<div class='phd_pushpin'></div>";
                                } else if (realData[i].brand === '麦当劳') {
                                    marker_icon = "<div class='mcd_pushpin'></div>";
                                } else {
                                    //先看此品牌之前是否取到过，若取到，则一定设置过颜色，则取此颜色即可
                                    var colorIndex = $.inArray(realData[i].brand, otherColor);
                                    if (colorIndex === -1) {
                                        //如果不存在，则先放入品牌数组，说明此品牌被取到过了
                                        otherColor.push(realData[i].brand);
                                        //然后根据品牌数组的index取颜色,由于限制了最多选项个数，则颜色的最多个数与限制的选项数相同
                                        colorIndex = $.inArray(realData[i].brand, otherColor);
                                    }
                                    var color = colorArray[colorIndex];
                                    marker_icon = "<div style='width: 18px;\n" +
                                            "        height: 18px;\n" +
                                            "        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;\n" +
                                            "        transform: rotate(135deg);\n" +
                                            "        background-color: " + color + "\n" +
                                            "        border-color: #888886;\n" +
                                            "        border-style: solid;\n" +
                                            "        border-width: 2px;'></div>";
                                }
                                shopInfo = "品牌：" + realData[i].brand + "<br>店名：" + realData[i].storeName;
                                var marker = new AMap.Marker({
                                    content: marker_icon,
                                    position: [realData[i].longitude, realData[i].latitude],
                                    visible: visivle,
                                    extData: realData[i].storeID
                                });
                                marker.content = shopInfo;
                                marker.on('mouseover', markerMouseOver);
                                marker.on('click', function markerClick(e) {
                                    window.open("/shop_with_shopid?shopid=" + e.target.F.extData);
                                });
                                marker.setMap(map);

                                var markerObj = {
                                    status: checked,//图钉是否显示，1：显示，0，隐藏
                                    marker: marker
                                }
                                mapMarker.push(markerObj);
                            }

                            function markerMouseOver(e) {
                                infoWindow.setContent("<div class='widget' " +
                                        "style='opacity: 0.86;background-color: #565656'>" +
                                        "<div class='widget-body'>" +
                                        "<p class='text-muted' style='color: white'>" + e.target.content + "</p>\n" +
                                        "</div></div>");
                                infoWindow.open(map, e.target.getPosition());
                            }
                        }
                    }
                });
            } else {
                $.ajax({
                    type: "GET",
                    url: "/service/data/get_map_overview_result?start_month=" + startMonth +
                    "&end_month=" + endMonth + "&brand_name="
                    + encodeURIComponent(brandName)
                    + "&max_lng=" + max_lng + "&min_lng=" + min_lng + "&max_lat=" + max_lat + "&min_lat=" + min_lat,
                    success: function (res) {
                        if (res.code === "suc") {
                            var realData = res.data;
                            var otherColor = [];
                            for (var i = 0; i < realData.length; i++) {
                                var val = "";
                                if (index === 1) {
                                    val = realData[i].storeTA;
                                } else if (index === 2) {
                                    val = realData[i].storeSales;
                                }
                                max = Math.max(max, val);
                                var point = {
                                    lng: realData[i].longitude,
                                    lat: realData[i].latitude,
                                    count: val
                                }
                                points.push(point);
                            }
                            heatMap.setDataSet({
                                max: max,
                                data: points
                            });

                            var checked = 1, visivle = true;
                            if ($("#ifShowShop").prop('checked') === false) {
                                checked = 0;
                                visivle = false;
                            }

                            for (var i = 0; i < realData.length; i++) {
                                var marker_icon = '';
                                var marker_val = "";
                                var marker_title = "";
                                var shopInfo = "";
                                if (index === 1) {
                                    marker_val = realData[i].storeTA;
                                    marker_title = "客单价：";
                                } else if (index === 2) {
                                    marker_val = realData[i].storeSales;
                                    marker_title = "销售额：";
                                }

                                if (realData[i].brand === '肯德基') {
                                    marker_icon = "<div class='kfc_pushpin'></div>";
                                } else if (realData[i].brand === '必胜客') {
                                    marker_icon = "<div class='ph_pushpin'></div>";
                                } else if (realData[i].brand === '必胜宅急送') {
                                    marker_icon = "<div class='phd_pushpin'></div>";
                                } else if (realData[i].brand === '麦当劳') {
                                    marker_icon = "<div class='mcd_pushpin'></div>";
                                } else {
                                    var colorIndex = $.inArray(realData[i].brand, otherColor);
                                    if (colorIndex === -1) {
                                        otherColor.push(realData[i].brand);
                                        colorIndex = $.inArray(realData[i].brand, otherColor);
                                    }
                                    var color = colorArray[colorIndex];
                                    marker_icon = "<div style='width: 18px;\n" +
                                            "        height: 18px;\n" +
                                            "        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;\n" +
                                            "        transform: rotate(135deg);\n" +
                                            "        background-color: " + color + "\n" +
                                            "        border-color: #888886;\n" +
                                            "        border-style: solid;\n" +
                                            "        border-width: 2px;'></div>";
                                }
                                shopInfo = "品牌：" + realData[i].brand + "<br>店名：" + realData[i].storeName;
                                var marker = new AMap.Marker({
                                    content: marker_icon,
                                    position: [realData[i].longitude, realData[i].latitude],
                                    visible: visivle,
                                    extData: realData[i].storeID
                                });
                                marker.content = shopInfo
                                        + "<br>" + marker_title + formatNum(marker_val.toFixed(2)) + " 元";
                                marker.on('mouseover', markerMouseOver);
                                marker.on('click', function markerClick(e) {
                                    window.open("/shop_with_shopid?shopid=" + e.target.F.extData);
                                });
                                marker.setMap(map);

                                var markerObj = {
                                    status: checked,//图钉是否显示，1：显示，0，隐藏
                                    marker: marker
                                }
                                mapMarker.push(markerObj);
                            }

                            function markerMouseOver(e) {
                                infoWindow.setContent("<div class='widget' " +
                                        "style='opacity: 0.86;background-color: #565656'>" +
                                        "<div class='widget-body'>" +
                                        "<p class='text-muted' style='color: white'>" + e.target.content + "</p>\n" +
                                        "</div></div>");
                                infoWindow.open(map, e.target.getPosition());
                            }

                            // function markerClick(e) {
                            //     infoWindow.setContent(e.target.content);
                            //     infoWindow.open(map, e.target.getPosition());
                            // }
                        }
                    }
                });
            }
        }

        //显示/隐藏图钉
        // $("#mapObjButton").click(function () {
        //     mapMarker.forEach(function (value) {
        //         if (value.status === 1) {
        //             value.status = 0;
        //             value.marker.hide();
        //         } else {
        //             value.status = 1;
        //             value.marker.show();
        //         }
        //     })
        // });

        $("#ifShowShop").change(function () {
            mapMarker.forEach(function (value) {
                if (value.status === 1) {
                    value.status = 0;
                    value.marker.hide();
                } else {
                    value.status = 1;
                    value.marker.show();
                }
            })
        });

        $("#mapSearchMonth").change(function () {
            SearchMonth($(this).val());
        });

        $("#cateSelect").change(function () {
            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var cityTier = $("#cityTier_select").val();
            BY_SUBCATE_DATA = [];
            // getBarCharts(startMonth, endMonth, cityTier, 0, $(this).val());
        });

        cityTierNameSelect.change(function () {
            matchCityTierSelect.html("");
            var cityTier = cityTierNameSelect.val();
            var html = "";
            if (cityTier.toLowerCase() === 'all') {
                html = html + "<option value='all' prop='all'>所有城市</option>";
                /*
                CITY_TIER_NAME_LIST.forEach(function (value, index) {
                    var prop = "";
                    CITY_TIER_NAME_LIST.forEach(function (value1, index) {
                        if (value1.cityTier !== 'all' && value.cityTier !== 'all' && value1.cityName === value.cityName) {
                            prop = value1.cityTier;
                            html = html + "<option value='" + value.cityName + "' prop='" + prop + "'>"
                                    + value.cityName + "</option>";
                        }
                    });
                });*/
            } else {
                html = html + "<option value='all' prop='all'>所有城市</option>";
                CITY_TIER_NAME_LIST.forEach(function (value, index) {
                    if (value.cityTier.toLowerCase() === cityTier.toLowerCase()) {
                        html = html + "<option value='" + value.cityName + "' prop='" + cityTier + "'>"
                                + value.cityName + "</option>"
                    }
                });
            }

            matchCityTierSelect.html(html);
        });

        $("#topBrandSearch").click(function () {
            getTopBrand(1);
        });

        //获取top brand数据，并生成表格
        function getTopBrand(type) {
            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var cityName = matchCityTierSelect.val();
            var cityTier = cityTierNameSelect.val();
            var cateName = "";
            if (type === 1) {
                cateName = $("#matchCate").val();
            } else {
                cateName = "中式简餐";
                cityName = "上海";
                cityTier = "tier 1";
            }

            if (startMonth === '' || cityName === '' || cateName === '' || endMonth === '') {
                return;
            }
            $("#topBrandTable").html("请稍等...");

            //此处重新生成表格
            $.ajax({
                type: "GET",
                url: "/service/data/get_top_brand_overview_result?start_month=" + startMonth + "&end_month=" + endMonth + "&city_name="
                + encodeURIComponent(cityName) + "&category_name=" + encodeURIComponent(cateName) + "&city_tier=" + cityTier,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            //销毁表格，便于之后重新生成数据
                            $('#default-datatable').DataTable().destroy();
                            var returnData = res.data;
                            var html = "";
                            returnData.forEach(function (value, index) {
                                var v1 = "", v2 = "", v3 = "", v4 = "", v5 = "", v6 = "", v7 = "";
                                try {
                                    v1 = formatNum(value.brandStoreNo);
                                } catch (e) {
                                }
                                try {
                                    v2 = fitNumToMillion(value.brandSalesValue.toFixed(index_decimals_num));
                                } catch (e) {
                                }
                                try {
                                    v3 = formatNum(value.brandTC.toFixed(0));
                                } catch (e) {
                                }
                                try {
                                    v4 = formatNum(value.brandTA.toFixed(index_decimals_num));
                                } catch (e) {
                                }
                                try {
                                    v5 = (value.brandTCMoM * 100).toFixed(index_decimals_num);
                                } catch (e) {
                                }
                                try {
                                    v6 = (value.brandTCYoY * 100).toFixed(index_decimals_num);
                                } catch (e) {
                                }
                                try {
                                    v7 = (value.brandTCPer * 100).toFixed(index_decimals_num);
                                } catch (e) {
                                }
                                html = html + ("<tr>" +
                                        "<td style='color:#cf3138;font-weight:bold'>" + value.brandName + "</td>" +
                                        "<td>" + v1 + "</td>" +
                                        "<td>" + v2 + "</td>" +
                                        "<td>" + v3 + "</td>" +
                                        "<td>" + v7 + "</td>" +
                                        "<td>" + v5 + "</td>" +
                                        "<td>" + v6 + "</td>" +
                                        "<td>" + v4 + "</td>" +
                                        "</tr>");
                            });
                            $("#topBrandTable").html(html);

                            var table = $('#default-datatable').DataTable({
                                //搜索框
                                "searching": true,
                                //是否排序
                                "bSort": true,
                                //是否显示每页显示数据大小
                                "bLengthChange": false,
                                //隐藏表格信息
                                "bInfo": false,
                                "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}],
                                "aaSorting": [[1, "desc"]]
                            });

                            //只搜索第一列
                            $('#default-datatable_filter > label > input').on('keyup', function () {
                                table.columns(0).search(this.value).draw();
                            });
                            $('#default-datatable').on( 'order.dt',  function () {
                                $('.table-striped > tbody > tr').css({
                                    'background-color':'white'
                                });
                                $('.table-striped > tbody > tr:nth-of-type(odd)').css({
                                    'background-color':'#fff3f5'
                                });
                            })
                            
                            $('.table-striped > tbody > tr:nth-of-type(odd)').css({
                                    'background-color':'#fff3f5'
                            })


                            
                        } catch (e) {
                        }
                    }
                }
            });

            //热门品牌占表格标题样式设置
            $("#default-datatable thead tr").css({
                //"background": "#ba1a20",
                //"color": "#fff"
                "border-bottom":"3px solid #ba1b20"
            })
        }

        /**
         * 除了当前被点击的元素之外，将某一系列的所有元素取消激活，并调用func所指定的方法
         * @param ele:被点击的按钮
         * @param allBtnEle:该元素下的所有按钮
         * @param func:需要调用的方法
         * */
        function clickButtonAndQuest(ele, allBtnEle, func) {
            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var cityTier = $("#cityTier_select").val();
            var eleHtml = ele.html().replace(/\s+/g, "");
            //激活点击的按钮，取消激活其他按钮
            ele.addClass('button_active');
            allBtnEle.each(function () {
                if (!ele.is($(this))) {
                    $(this).removeClass('button_active');
                }
            });
            //判断方法对应的参数
            if (eleHtml === '店铺数') {
                func(startMonth, endMonth, cityTier, 2, 6);
            } else if (eleHtml === '销售额') {
                func(startMonth, endMonth, cityTier, 1, 6);
            } else {
                func(startMonth, endMonth, cityTier, 0, 6);
            }
        }

        widget1Btn.click(function () {
            clickButtonAndQuest($(this), widget1Btn, getSalesCharts);
        });

        widget2Btn.click(function () {
            clickButtonAndQuest($(this), widget2Btn, getCityCharts);
        });

        widget3Btn.click(function () {
            clickButtonAndQuest($(this), widget3Btn, getPieCharts);
        });

        // widget5Btn.click(function () {
        //     clickButtonAndQuest($(this), widget5Btn, getBarCharts);
        // });

        widget6Btn.click(function () {
            var ele = $(this);
            var eleHtml = ele.html().replace(/\s+/g, "");
            //激活点击的按钮，取消激活其他按钮
            ele.addClass('button_active');
            widget6Btn.each(function () {
                if (!ele.is($(this))) {
                    $(this).removeClass('button_active');
                }
            });
            if (eleHtml === '咖啡') {
                getWangHongProduct(1);
            } else if (eleHtml === '非中式餐厅') {
                getWangHongProduct(0);
            } else if (eleHtml === '西式快餐') {
                getWangHongProduct(1);
            } else if (eleHtml === '甜品饮料') {
                getWangHongProduct(0);
            } else if (eleHtml === '中式餐厅') {
                getWangHongProduct(1);
            } else {
                getWangHongProduct(0);
            }
        });

        widget7Btn.click(function () {
            var ele = $(this);
            //激活点击的按钮，取消激活其他按钮
            ele.addClass('button_active');
            var eleHtml = ele.html().replace(/\s+/g, "");
            widget7Btn.each(function () {
                if (!ele.is($(this))) {
                    $(this).removeClass('button_active');
                }
            });
            //判断方法对应的参数
            if (eleHtml === '客单价') {
                mapIndex = 1;
                generateHeatMap(mapIndex);
            } else if (eleHtml === '销售额') {
                mapIndex = 2;
                generateHeatMap(mapIndex);
            } else {
                mapIndex = 3;
                generateHeatMap(mapIndex);
            }
        });

        //模态框弹出，显示过去12个月的趋势
        $('#myModal').on('shown.bs.modal', function (e) {
            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var cityTier = $("#cityTier_select").val();
            var categoryTier = $("#cateSelect").val();
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_by_subcategory_trend" +
                "?start_month=" + startMonth + "&end_month=" + endMonth + "&city_tier=" + cityTier
                + "&category_tier=" + categoryTier + "&category_name=" + encodeURIComponent(TIP_DATA.cateName),
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            console.log(returnData);
                            var date = [], value = [];
                            var yName = "";
                            for (var i = 0; i < returnData.length; i++) {
                                date.push(returnData[i].yearMonth.toString().substring(0, 4)
                                        + "-" + returnData[i].yearMonth.toString().substring(4, 6));
                                if (TIP_DATA.type.indexOf('客单') !== -1) {
                                    if (categoryTier === '1') {
                                        value.push(returnData[i].categoryTC);
                                    } else {
                                        value.push(returnData[i].subCategoryTC);
                                    }
                                    yName = '客单数(笔)';
                                } else if (TIP_DATA.type.indexOf('销售') !== -1) {
                                    if (categoryTier === '1') {
                                        value.push(returnData[i].categoryGMV.toFixed(decimals_num));
                                    } else {
                                        value.push(returnData[i].subCategoryGMV.toFixed(decimals_num));
                                    }
                                    yName = '销售额(元)';
                                } else if (TIP_DATA.type.indexOf('店铺') !== -1) {
                                    if (categoryTier === '1') {
                                        value.push(returnData[i].categoryStore);
                                    } else {
                                        value.push(returnData[i].subCategoryStore);
                                    }
                                    yName = '店铺数(家)';
                                }

                            }
                            var tipChart = echarts.init(document.getElementById("tips"));
                            var option1 = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                        type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                                    }
                                },
                                grid: {
                                    left: '3%',
                                    right: '8%',
                                    bottom: '3%',
                                    containLabel: true
                                },
                                xAxis: {
                                    type: 'category',
                                    data: date,
                                    name: '月份'
                                },
                                yAxis: {
                                    type: 'value',
                                    name: yName
                                },
                                series: [{
                                    data: value,
                                    type: 'line'
                                }]
                            };
                            tipChart.clear();
                            tipChart.setOption(option1);
                        } catch (e) {
                            TIP_DATA = {};
                            $('#myModal').modal('hide');
                        }
                    } else {
                        TIP_DATA = {};
                        $('#myModal').modal('hide');
                    }
                }
            });
        });

        // $("#shops").on('click', function (e) {
        //     tipTool()
        //     var x = e.clientX;
        //     var y = e.clientY;
        //     //兼容性处理
        //     var oEvent = e || event;
        //     //兼容性处理
        //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //     var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        //     var $ele = $('#tmp_div');
        //     //ele.attr('hidden', 'hidden');
        //     $ele.css('top', scrollTop + y);
        //     $ele.css('left', scrollLeft + x);
        //     $ele.css('position', 'absolute');
        //     $ele.css('height', '30px');
        //     $ele.css('width', '30px');
        //     $ele.webuiPopover($.extend({}, settings, tableSettings));
        //     //tipTool();
        // });

        getOverviewRate(defaultMonth, defaultMonth, 'all');
        getSalesCharts(defaultMonth, defaultMonth, 'all', 0, 6);
        getCityCharts(defaultMonth, defaultMonth, 'all', 0);
        getPieCharts(defaultMonth, defaultMonth, 'all', 0);
        // getBarCharts(defaultMonth, defaultMonth, 'all', 0, 1);
        getOverviewSub(defaultMonth, defaultMonth, 'all', '西式快餐,Pizza&Pasta');
        //店铺品类销售情况
        buildTable('all', defaultMonth, defaultMonth);
        getTopBrand(0);
        getWangHongProduct(1);
        $("#search").click(function () {
            //清空暂存数据
            BY_CHANNEL_DATA = [];
            BY_SUBCATE_DATA = [];
            MONTHLY_SALES_DATA = [];
            BY_CITY_DATA = [];
            BY_CHANNEL_DATA = [];

            $("#overview_sales").html("- ");
            $("#overview_sales_mom").html("环比增长 -%");
            $("#overview_sales_yoy").html("同比增长 -%");
            $("#overview_tc").html("- ");
            $("#overview_tc_mom").html("环比增长 -%");
            $("#overview_tc_yoy").html("同比增长 -%");
            $("#overview_store").html("- ");
            $("#overview_store_mom").html("环比增长 -%");
            $("#overview_store_yoy").html("同比增长 -%");
            $("#w_sales").html("- ");
            $("#w_sales_mom").html("-");
            $("#w_sales_yoy").html("-");
            $("#w_tc").html("- ");
            $("#w_tc_mom").html("-");
            $("#w_tc_yoy").html("-");
            $("#w_store").html("- ");
            $("#w_store_mom").html("-");
            $("#w_store_yoy").html("-");
            $("#p_sales").html("- ");
            $("#p_sales_mom").html("-");
            $("#p_sales_yoy").html("-");
            $("#p_tc").html("- ");
            $("#p_tc_mom").html("-");
            $("#p_tc_yoy").html("-");
            $("#p_store").html("- ");
            $("#p_store_mom").html("-");
            $("#p_store_yoy").html("-");

            //恢复按钮到初始状态
            cleanButtonStatus(widget1Btn);
            cleanButtonStatus(widget2Btn);
            cleanButtonStatus(widget3Btn);
            cleanButtonStatus(widget5Btn);
            cleanButtonStatus1(widget7Btn);
            $("#mapSearchMonth").val('6');
            $("#cateSelect").val('1');
            $('.selectpicker').selectpicker('deselectAll');
            $("#mapSearchInput").val('');
            //getCityTierName();
            map.clearMap();
            mapMarker = [];
            //清空热力图
            try {
                heatMap.setDataSet({
                    max: 0,
                    data: []
                });
            } catch (e) {
            }
            $("#ifShowShop").prop("checked", false);

            var startMonth = $("#start_date").val();
            var endMonth = $("#end_date").val();
            var cityTier = $("#cityTier_select").val();
            getOverviewRate(startMonth, endMonth, cityTier);
            getPieCharts(startMonth, endMonth, cityTier, 0);
            // getBarCharts(startMonth, endMonth, cityTier, 0, 1);
            getSalesCharts(startMonth, endMonth, cityTier, 0, 6);
            getCityCharts(startMonth, endMonth, cityTier, 0);
            getOverviewSub(startMonth, endMonth, cityTier, '西式快餐,Pizza&Pasta');

            getTopBrand(1);
            //店铺品类销售情况
            buildTable(cityTier, startMonth, endMonth);
        });

        function cleanButtonStatus(ele) {
            $(ele).each(function () {
                var eleHtml = $(this).html().replace(/\s+/g, "");
                if (eleHtml === '客单数' || eleHtml === '客单价') {
                    $(this).addClass('button_active');
                } else {
                    $(this).removeClass('button_active');
                }
            })
        }

        function cleanButtonStatus1(ele) {
            $(ele).each(function () {
                var eleHtml = $(this).html().replace(/\s+/g, "");
                if (eleHtml === '销售额') {
                    $(this).addClass('button_active');
                } else {
                    $(this).removeClass('button_active');
                }
            })
        }

        function getCityTierView() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_city_tier",
                success: function (res) {
                    if (res.code === "suc") {
                        var realData = res.data;
                        try {
                            realData.forEach(function (value, index) {
                                $("#cityTier_select").append("<option value='" + value.cityTierName + "'>"
                                        + value.cityTierRealName + "</option>");
                            });

                        } catch (e) {
                        }
                    }
                }
            });
        }

        //获取最新数据的月份
        function getLatestMonth() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_latest_month",
                async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            defaultMonth = res.data.yearMonth.toString().substring(0, 4)
                                    + "-" + res.data.yearMonth.toString().substring(4, 6);
                            $('.datepicker').datepicker('update', defaultMonth);
                        } catch (e) {
                        }
                    }
                }
            });
        }

        //获取城市等级和城市名的级联关系
        function getCityTierName() {
            $.ajax({
                type: "GET",
                url: "/service/view/get_city_tier_name",
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            cityTierNameSelect.html("");
                            matchCityTierSelect.html("");
                            var cityTierList = returnData.city_tier;
                            CITY_TIER_NAME_LIST = returnData.city_tier_name;
                            cityTierList.forEach(function (value, index) {
                                if (value.cityTierName === 'Tier 1') {
                                    cityTierNameSelect.append("<option value='" + value.cityTierName + "' selected>"
                                            + value.cityTierRealName + "</option>");
                                } else {
                                    cityTierNameSelect.append("<option value='" + value.cityTierName + "'>"
                                            + value.cityTierRealName + "</option>");
                                }
                            });
                            matchCityTierSelect.append("<option value='all' prop='all'>所有城市</option>");
                            CITY_TIER_NAME_LIST.forEach(function (value, index) {
                                if (value.cityTier === 'Tier 1') {
                                    var prop = "";
                                    CITY_TIER_NAME_LIST.forEach(function (value1, index) {
                                        if (value1.cityTier !== 'all' && value1.cityName === value.cityName) {
                                            prop = value1.cityTier;
                                        }
                                    });
                                    if (value.cityName === '上海') {
                                        matchCityTierSelect.append("<option value='" + value.cityName + "' prop='" + prop + "' selected>"
                                                + value.cityName + "</option>");
                                    } else {
                                        matchCityTierSelect.append("<option value='" + value.cityName + "' prop='" + prop + "'>"
                                                + value.cityName + "</option>");
                                    }
                                }
                            });
                        } catch (e) {
                        }
                    }
                }
            });
        }


        function getOverviewSub(startMonth, endMonth, cityTier, subCategory) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_of_sub?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + encodeURIComponent(cityTier) + "&sub_category=" + encodeURIComponent(subCategory),
                success: function (res) {
                    if (res.code === "suc") {
                        var realData = res.data;
                        for (var i = 0; i < realData.length; i++) {
                            var tmp = realData[i];
                            if (tmp.subCategoryName.toLowerCase() === 'pizza&pasta') {
                                $("#p_sales").html(fitNum(tmp.subCategorySalesValue.toFixed(decimals_num)));
                                $("#p_tc").html(fitNum(tmp.subCategoryTC.toString()));
                                $("#p_store").html(fitNum(tmp.subCategoryStoreNo.toString()));
                            } else if (tmp.subCategoryName === '西式快餐') {
                                $("#w_sales").html(fitNum(tmp.subCategorySalesValue.toFixed(decimals_num)));
                                $("#w_tc").html(fitNum(tmp.subCategoryTC.toString()));
                                $("#w_store").html(fitNum(tmp.subCategoryStoreNo.toString()));
                            }
                        }
                    }
                }
            });
        }

        function getOverviewRate(startMonth, endMonth, cityTier) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_rate?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + cityTier,
                success: function (res) {
                    if (res.code === "suc") {
                        var realData = res.data;
                        console.log(realData);
                        try {
                            //----------------------------总体----------------------------
                            var mUp = "&nbsp;&nbsp;<i class='glyphicon glyphicon-arrow-up' style='color: #21dd21'></i>";
                            var mDown = "&nbsp;&nbsp;<i class='glyphicon glyphicon-arrow-down' style='color: #ff3300'></i>";
                            var yUp = "&nbsp;&nbsp;<i class='glyphicon glyphicon-chevron-up' style='color: #21dd21'></i>";
                            var yDown = "&nbsp;&nbsp;<i class='glyphicon glyphicon-chevron-down' style='color: #ff3300'></i>";
                            realData.forEach(function(val,idx) {
                                //----------------------------总体----------------------------
                                if (val.subSegmentID==1){
                                    if (val.salesmom >= 0) {
                                        $("#overview_sales_mom").html(
                                                formatNum((val.salesmom * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_sales_mom").html(
                                                formatNum((val.salesmom * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }
                                    if (val.salesyoy >= 0) {
                                        $("#overview_sales_yoy").html(
                                                formatNum((val.salesyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_sales_yoy").html(
                                                formatNum((val.salesyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }

                                    if (val.tcmom >= 0) {
                                        $("#overview_tc_mom").html(
                                                formatNum((val.tcmom * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_tc_mom").html(
                                                formatNum((val.tcmom * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }
                                    if (val.tcyoy >= 0) {
                                        $("#overview_tc_yoy").html(
                                                formatNum((val.tcyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_tc_yoy").html(
                                                formatNum((val.tcyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }

                                    if (val.storenomom >= 0) {
                                        $("#overview_store_mom").html(
                                                formatNum((val.storenomom * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_store_mom").html(
                                                formatNum((val.storenomom * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }
                                    if (val.storenoyoy >= 0) {
                                        $("#overview_store_yoy").html(
                                                formatNum((val.storenoyoy * 100).toFixed(decimals_num)) + " %" + mUp);
                                    } else {
                                        $("#overview_store_yoy").html(
                                                formatNum((val.storenoyoy * 100).toFixed(decimals_num)) + " %" + mDown);
                                    }
                                    $("#overview_sales").html(fitNum(new Number(val.sales).toFixed(decimals_num)));
                                    $("#overview_tc").html(fitNum(val.tc.toString()));
                                    $("#overview_store").html(fitNum(val.storeNo.toString()));
                                }
                                //----------------------------WQSR----------------------------
                                if (val.subSegmentID==2) {
                                    var salesMoM = formatNum((val.salesmom * 100).toFixed(decimals_num));
                                    var salesYoY = formatNum((val.salesyoy * 100).toFixed(decimals_num));
                                    if (val.salesmom >= 0) {
                                        $("#w_sales_mom").html("<span>" + salesMoM + " %</span>" + mUp);
                                    } else {
                                        $("#w_sales_mom").html("<span>" + salesMoM + " %</span>" + mDown);
                                    }
                                    if (val.salesyoy >= 0) {
                                        $("#w_sales_yoy").html("<span>" + salesYoY + " %</span>" + mUp);
                                    } else {
                                        $("#w_sales_yoy").html("<span>" + salesYoY + " %</span>" + mDown);
                                    }
                                    var tcMoM = formatNum((val.tcmom * 100).toFixed(decimals_num));
                                    var tcYoY = formatNum((val.tcyoy * 100).toFixed(decimals_num));
                                    if (val.tcmom >= 0) {
                                        $("#w_tc_mom").html("<span>" + tcMoM + " %</span>" + mUp);
                                    } else {
                                        $("#w_tc_mom").html("<span>" + tcMoM + " %</span>" + mDown);
                                    }
                                    if (val.tcyoy >= 0) {
                                        $("#w_tc_yoy").html("<span>" + tcYoY + " %</span>" + mUp);
                                    } else {
                                        $("#w_tc_yoy").html("<span>" + tcYoY + " %</span>" + mDown);
                                    }

                                    var storeMoM = formatNum((val.storenomom * 100).toFixed(decimals_num));
                                    var storeYoY = formatNum((val.storenoyoy * 100).toFixed(decimals_num));
                                    if (val.storenomom >= 0) {
                                        $("#w_store_mom").html("<span>" + storeMoM + " %</span>" + mUp);
                                    } else {
                                        $("#w_store_mom").html("<span>" + storeMoM + " %</span>" + mDown);
                                    }
                                    if (val.storenoyoy >= 0) {
                                        $("#w_store_yoy").html("<span>" + storeYoY + " %</span>" + mUp);
                                    } else {
                                        $("#w_store_yoy").html("<span>" + storeYoY + " %</span>" + mDown);
                                    }
                                    $("#w_sales").html(fitNum(new Number(val.sales).toFixed(decimals_num)));
                                    $("#w_tc").html(fitNum(val.tc.toString()));
                                    $("#w_store").html(fitNum(val.storeNo.toString()));
                                }
                                //----------------------------Pizza----------------------------
                                if (val.subSegmentID==3) {
                                    var salesMoM = formatNum((val.salesmom * 100).toFixed(decimals_num));
                                    var salesYoY = formatNum((val.salesyoy * 100).toFixed(decimals_num));
                                    if (val.salesmom >= 0) {
                                        $("#p_sales_mom").html("<span>" + salesMoM + " %</span>" + mUp);
                                    } else {
                                        $("#p_sales_mom").html("<span>" + salesMoM + " %</span>" + mDown);
                                    }
                                    if (val.salesyoy >= 0) {
                                        $("#p_sales_yoy").html("<span>" + salesYoY + " %</span>" + mUp);
                                    } else {
                                        $("#p_sales_yoy").html("<span>" + salesYoY + " %</span>" + mDown);
                                    }
                                    var tcMoM = formatNum((val.tcmom * 100).toFixed(decimals_num));
                                    var tcYoY = formatNum((val.tcyoy * 100).toFixed(decimals_num));
                                    if (val.tcmom >= 0) {
                                        $("#p_tc_mom").html("<span>" + tcMoM + " %</span>" + mUp);
                                    } else {
                                        $("#p_tc_mom").html("<span>" + tcMoM + " %</span>" + mDown);
                                    }
                                    if (val.tcyoy >= 0) {
                                        $("#p_tc_yoy").html("<span>" + tcYoY + " %</span>" + mUp);
                                    } else {
                                        $("#p_tc_yoy").html("<span>" + tcYoY + " %</span>" + mDown);
                                    }

                                    var storeMoM = formatNum((val.storenomom * 100).toFixed(decimals_num));
                                    var storeYoY = formatNum((val.storenoyoy * 100).toFixed(decimals_num));
                                    if (val.storenomom >= 0) {
                                        $("#p_store_mom").html("<span>" + storeMoM + " %</span>" + mUp);
                                    } else {
                                        $("#p_store_mom").html("<span>" + storeMoM + " %</span>" + mDown);
                                    }
                                    if (val.storenoyoy >= 0) {
                                        $("#p_store_yoy").html("<span>" + storeYoY + " %</span>" + mUp);
                                    } else {
                                        $("#p_store_yoy").html("<span>" + storeYoY + " %</span>" + mDown);
                                    }
                                    $("#p_sales").html(fitNum(new Number(val.sales).toFixed(decimals_num)));
                                    $("#p_tc").html(fitNum(val.tc.toString()));
                                    $("#p_store").html(fitNum(val.storeNo.toString()));
                                }
                            });
                        } catch (e) {
                        }
                    }
                }
            });
        }
    });

    function RandomNumBoth(min, max) {
        var Range = max - min;
        var Rand = Math.random();
        return (min + Rand * Range); //四舍五入
    }

    //销量折线图生成
    function getSalesCharts(startMonth, endMonth, cityTier, index, monthNum) {
        //若未定义，则新建
        if (typeof echarts.getInstanceByDom(document.getElementById("sales")) === 'undefined') {
            myChart1 = echarts.init(document.getElementById("sales"))
        }
        var option = {};
        myChart1.clear();
        myChart1.setOption(option);

        myChart1.showLoading();
        getSalesData(startMonth, endMonth, cityTier, monthNum, function (data) {
            myChart1.hideLoading();
            if (MONTHLY_SALES_DATA.length === 0) {
                noDataHandler(myChart1, $("#sales"));
                return;
            }
            var real_data = MONTHLY_SALES_DATA[index];
            var monthName = MONTHLY_SALES_DATA[3];
            var xName = "";
            if (index === 0) {
                xName = "客单数(万笔)";
            } else if (index === 1) {
                xName = "销售额(万元)";
            } else if (index === 2) {
                xName = "店铺数(万家)";
            }

            myChart1.clear();
            myChart1.setOption({
                color: COLOR,
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: PLATFORM,
                    tooltip: {
                        //align: 'left',
                        show: true,
                        formatter: '点击可选择不同渠道'
                    }
                },
                grid: {
                    left: '3%',
                    right: '8%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: monthName,
                    name: "月份"
                },
                yAxis: {
                    type: 'value',
                    splitLine: false,
                    name: xName,
                    axisLabel: {
                        formatter: function (value, index) {
                            return formatNum(value / 10000);
                        }
                    }
                },
                series: [
                    {
                        name: '美团外卖',
                        type: 'line',
                        data: real_data[2],
                        lineStyle: {
                            width: 3
                        }
                    },
                    {
                        name: '饿了么',
                        type: 'line',
                        data: real_data[0],
                        lineStyle: {
                            width: 3
                        }
                    },
                    {
                        name: '百度外卖',
                        type: 'line',
                        data: real_data[1],
                        lineStyle: {
                            width: 3
                        }
                    }
                ]
            });
        });
    }

    //获取销量折线图数据
    function getSalesData(startMonth, endMonth, cityTier, month_num, data) {
        //若数据空，则发送请求获取数据
        if (MONTHLY_SALES_DATA.length === 0) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_monthly_result_by_channel?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + cityTier + "&month_num=" + month_num,
                //async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            console.log(returnData);
                            MONTHLY_SALES_DATA[0] = [];
                            MONTHLY_SALES_DATA[1] = [];
                            MONTHLY_SALES_DATA[2] = [];
                            MONTHLY_SALES_DATA[3] = [];
                            var maxLength = Math.max.apply(Math,
                                    [returnData.ELeMe.length, returnData.BaiduWaiMai.length, returnData.MeiTuan.length]);
                            if (maxLength === 0) {
                                MONTHLY_SALES_DATA = [];
                                data({data: MONTHLY_SALES_DATA});
                                return;
                            }
                            for (var i = 0; i < maxLength; i++) {
                                if (i === 0) {
                                    MONTHLY_SALES_DATA[0][0] = [];
                                    MONTHLY_SALES_DATA[1][0] = [];
                                    MONTHLY_SALES_DATA[2][0] = [];
                                    MONTHLY_SALES_DATA[0][1] = [];
                                    MONTHLY_SALES_DATA[1][1] = [];
                                    MONTHLY_SALES_DATA[2][1] = [];
                                    MONTHLY_SALES_DATA[0][2] = [];
                                    MONTHLY_SALES_DATA[1][2] = [];
                                    MONTHLY_SALES_DATA[2][2] = [];
                                }
                                if (returnData.ELeMe.length - maxLength + i >= 0) {
                                    MONTHLY_SALES_DATA[0][0][i] = returnData.ELeMe[i].channelTC.toFixed(0);
                                    MONTHLY_SALES_DATA[1][0][i] = returnData.ELeMe[i].channelGMV.toFixed(decimals_num);
                                    MONTHLY_SALES_DATA[2][0][i] = returnData.ELeMe[i].channelStoreNo.toFixed(0);
                                    MONTHLY_SALES_DATA[3][i] = returnData.ELeMe[i].yearMonth.toString().substring(0, 4)
                                            + "-" + returnData.ELeMe[i].yearMonth.toString().substring(4, 6);
                                } else {
                                    MONTHLY_SALES_DATA[0][0][i] = null;
                                    MONTHLY_SALES_DATA[1][0][i] = null;
                                    MONTHLY_SALES_DATA[2][0][i] = null;
                                }
                                if (returnData.BaiduWaiMai.length - maxLength + i >= 0) {
                                    MONTHLY_SALES_DATA[0][1][i] = returnData.BaiduWaiMai[i].channelTC.toFixed(0);
                                    MONTHLY_SALES_DATA[1][1][i] = returnData.BaiduWaiMai[i].channelGMV.toFixed(decimals_num);
                                    MONTHLY_SALES_DATA[2][1][i] = returnData.BaiduWaiMai[i].channelStoreNo.toFixed(0);
                                    MONTHLY_SALES_DATA[3][i] = returnData.BaiduWaiMai[i].yearMonth.toString().substring(0, 4)
                                            + "-" + returnData.BaiduWaiMai[i].yearMonth.toString().substring(4, 6);
                                } else {
                                    MONTHLY_SALES_DATA[0][1][i] = null;
                                    MONTHLY_SALES_DATA[1][1][i] = null;
                                    MONTHLY_SALES_DATA[2][1][i] = null;
                                }
                                if (returnData.MeiTuan.length - maxLength + i >= 0) {
                                    MONTHLY_SALES_DATA[0][2][i] = returnData.MeiTuan[i].channelTC.toFixed(0);
                                    MONTHLY_SALES_DATA[1][2][i] = returnData.MeiTuan[i].channelGMV.toFixed(decimals_num);
                                    MONTHLY_SALES_DATA[2][2][i] = returnData.MeiTuan[i].channelStoreNo.toFixed(0);
                                    MONTHLY_SALES_DATA[3][i] = returnData.MeiTuan[i].yearMonth.toString().substring(0, 4)
                                            + "-" + returnData.MeiTuan[i].yearMonth.toString().substring(4, 6);
                                } else {
                                    MONTHLY_SALES_DATA[0][2][i] = null;
                                    MONTHLY_SALES_DATA[1][2][i] = null;
                                    MONTHLY_SALES_DATA[2][2][i] = null;
                                }
                            }
                        } catch (e) {
                            MONTHLY_SALES_DATA = [];
                            //return [];
                        }
                    } else {
                        MONTHLY_SALES_DATA = [];
                    }
                    data({data: MONTHLY_SALES_DATA});
                }
            });
        } else {
            data({data: MONTHLY_SALES_DATA});
        }
    }

    //城市占比柱状图生成
    function getCityCharts(startMonth, endMonth, cityTier, index) {
        //若未定义，则新建
        if (typeof echarts.getInstanceByDom(document.getElementById("city")) === 'undefined') {
            myChart2 = echarts.init(document.getElementById("city"))
        }

        var option = {};
        myChart2.clear();
        myChart2.setOption(option);

        myChart2.showLoading();
        getCityData(startMonth, endMonth, cityTier, function (data) {
            myChart2.hideLoading();
            if (BY_CITY_DATA.length === 0) {
                noDataHandler(myChart2, $("#city"));
                return;
            }
            var real_data = BY_CITY_DATA[index];
            CITY_DATA_TMP = real_data;
            //real_data[3]为三个平台的总量
            var newData = real_data[3];
            var cityName = real_data[4];
            var pageNum = 1;
            var pageArray = [], options = [];
            if (cityName.length % max_chart_num === 0) {
                pageNum = cityName.length / max_chart_num;
            } else {
                pageNum = Math.floor(cityName.length / max_chart_num) + 1;
            }
            for (var p = 1; p <= pageNum; p++) {
                pageArray.push("第 " + p + " 页");
                var startIndex = (cityName.length - p * max_chart_num) < 0 ? 0 : (cityName.length - p * max_chart_num);
                var endIndex = (cityName.length - (p - 1) * max_chart_num) < 0 ? 0 : (cityName.length - (p - 1) * max_chart_num);
                //自执行函数传参（匿名函数），否则startIndex会异常
                (function (startIndex) {
                    var o = {
                        yAxis: {
                            type: 'category',
                            data: cityName.slice(startIndex, endIndex),
                            name: "城市"

                        },
                        series: [
                            {
                                data: real_data[0].slice(startIndex, endIndex),
                                label: {
                                    normal: {
                                        color: '#454545',
                                        formatter: function (params) {
                                            return fitNum(parseFloat(newData[params.dataIndex + startIndex]).toFixed(decimals_num));
                                        },
                                        show: false,
                                        position: 'right'
                                    }
                                }
                            }, // 系列一的数据
                            {
                                data: real_data[1].slice(startIndex, endIndex),
                                label: {
                                    normal: {
                                        color: '#454545',
                                        formatter: function (params) {
                                            return fitNum(parseFloat(newData[params.dataIndex + startIndex]).toFixed(decimals_num));
                                        },
                                        show: false,
                                        position: 'right'
                                    }
                                }
                            }, // 系列二的数据
                            {
                                data: real_data[2].slice(startIndex, endIndex),
                                label: {
                                    normal: {
                                        formatter: function (params) {
                                            return fitNum(parseFloat(newData[params.dataIndex + startIndex]).toFixed(decimals_num));
                                        },
                                        color: '#454545',
                                        show: true,
                                        position: 'right'
                                    }
                                }
                            }  // 系列三的数据
                        ]
                    }
                    options.push(o);
                })(startIndex);
            }

            var xName = "", totalName = "";
            if (index === 0) {
                xName = "客单数(万笔)";
                totalName = "总单量(万笔)";
            } else if (index === 1) {
                xName = "销售额(万元)";
                totalName = "总销售额(万元)";
            } else if (index === 2) {
                xName = "店铺数(万家)";
                totalName = "总店铺数(万家)";
            }
            myChart2.clear();

            option = {
                baseOption: {
                    timeline: {
                        data: pageArray,
                        label: {
                            formatter: function (s) {
                                return s;
                            }
                        },
                        axisType: 'category',
                        controlStyle: {
                            showPlayBtn: false
                        }
                    },
                    title: {
                        text: '',
                        subtext: '',
                        right: '3%'
                    },
                    color: COLOR,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: PLATFORM,
                        tooltip: {
                            show: true,
                            formatter: '点击可选择不同渠道'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '15%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        splitLine: false,
                        name: xName,
                        axisLabel: {
                            formatter: function (value, index) {
                                return formatNum(value / 10000);
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        name: "城市"
                    },
                    series: [
                        {
                            name: '美团外卖',
                            type: 'bar',
                            stack: '总量'
                        },
                        {
                            name: '饿了么',
                            type: 'bar',
                            stack: '总量'
                        },
                        {
                            name: '百度外卖',
                            type: 'bar',
                            stack: '总量'
                        }
                    ]
                },
                options: options
            };
            myChart2.setOption(option);
            myChart2.on('legendselectchanged', function (params) {
                console.log(CITY_DATA_TMP);
                var baidu = params.selected.百度外卖;
                var meituan = params.selected.美团外卖;
                var eleme = params.selected.饿了么;

                newData = [];
                if (baidu && meituan && eleme) {
                    newData = CITY_DATA_TMP[3];
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = true;
                    }
                } else if (baidu && meituan && (!eleme)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = parseFloat(CITY_DATA_TMP[0][i]) + parseFloat(CITY_DATA_TMP[2][i]);
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = true;
                    }
                } else if (baidu && eleme && (!meituan)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = parseFloat(CITY_DATA_TMP[1][i]) + parseFloat(CITY_DATA_TMP[2][i]);
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = true;
                    }
                } else if (meituan && eleme && (!baidu)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = parseFloat(CITY_DATA_TMP[0][i]) + parseFloat(CITY_DATA_TMP[1][i]);
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = true;
                        option.options[o].series[2].label.normal.show = false;
                    }
                } else if (meituan && (!eleme) && (!baidu)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = CITY_DATA_TMP[0][i];
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = true;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = false;
                    }
                } else if (eleme && (!baidu) && (!meituan)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = CITY_DATA_TMP[1][i];
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = true;
                        option.options[o].series[2].label.normal.show = false;
                    }
                } else if (baidu && (!eleme) && (!meituan)) {
                    for (var i = 0; i < CITY_DATA_TMP[0].length; i++) {
                        newData[i] = CITY_DATA_TMP[2][i];
                    }
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = true;
                    }
                } else {
                    newData = [];
                    for (var o = 0; o < option.options.length; o++) {
                        option.options[o].series[0].label.normal.show = false;
                        option.options[o].series[1].label.normal.show = false;
                        option.options[o].series[2].label.normal.show = false;
                    }
                }
                myChart2.setOption(option);
            });
        })
        ;
    }

    //获取城市占比柱状图数据
    function getCityData(startMonth, endMonth, cityTier, data) {
        //若数据空，则发送请求获取数据
        if (BY_CITY_DATA.length === 0) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_by_city?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + cityTier,
                //async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            console.log(returnData);
                            BY_CITY_DATA[0] = [];
                            BY_CITY_DATA[1] = [];
                            BY_CITY_DATA[2] = [];
                            if (returnData.cityTCTotal.length == 0 || returnData.cityGMVTotal.length == 0) {
                                BY_CITY_DATA = [];
                                data({data: BY_CITY_DATA});
                                return;
                            }
                            for (var i = 0; i < returnData.cityTCTotal.length; i++) {
                                var cityName = returnData.cityTCTotal[i].city;
                                if (i === 0) {
                                    BY_CITY_DATA[0][0] = [];
                                    BY_CITY_DATA[0][1] = [];
                                    BY_CITY_DATA[0][2] = [];
                                    BY_CITY_DATA[0][3] = [];//存放总量
                                    BY_CITY_DATA[0][4] = [];//存放城市名
                                }
                                BY_CITY_DATA[0][0][i] = returnData.cityTCper.MeiTuan[cityName].toFixed(0);
                                BY_CITY_DATA[0][1][i] = returnData.cityTCper.ELeMe[cityName].toFixed(0);
                                BY_CITY_DATA[0][2][i] = returnData.cityTCper.BaiduWaiMai[cityName].toFixed(0);
                                BY_CITY_DATA[0][3][i] = returnData.cityTCTotal[i].value.toFixed(0);
                                BY_CITY_DATA[0][4][i] = cityName;
                            }
                            for (var i = 0; i < returnData.cityGMVTotal.length; i++) {
                                var cityName = returnData.cityGMVTotal[i].city;
                                if (i === 0) {
                                    BY_CITY_DATA[1][0] = [];
                                    BY_CITY_DATA[1][1] = [];
                                    BY_CITY_DATA[1][2] = [];
                                    BY_CITY_DATA[1][3] = [];
                                    BY_CITY_DATA[1][4] = [];
                                }
                                BY_CITY_DATA[1][0][i] = returnData.cityGMVper.MeiTuan[cityName].toFixed(decimals_num);
                                BY_CITY_DATA[1][1][i] = returnData.cityGMVper.ELeMe[cityName].toFixed(decimals_num);
                                BY_CITY_DATA[1][2][i] = returnData.cityGMVper.BaiduWaiMai[cityName].toFixed(decimals_num);
                                BY_CITY_DATA[1][3][i] = returnData.cityGMVTotal[i].value.toFixed(decimals_num);
                                BY_CITY_DATA[1][4][i] = cityName;
                            }
                            for (var i = 0; i < returnData.cityStoreNoTotal.length; i++) {
                                var cityName = returnData.cityStoreNoTotal[i].city;
                                if (i === 0) {
                                    BY_CITY_DATA[2][0] = [];
                                    BY_CITY_DATA[2][1] = [];
                                    BY_CITY_DATA[2][2] = [];
                                    BY_CITY_DATA[2][3] = [];
                                    BY_CITY_DATA[2][4] = [];
                                }
                                BY_CITY_DATA[2][0][i] = returnData.cityStoreNoper.MeiTuan[cityName].toFixed(0);
                                BY_CITY_DATA[2][1][i] = returnData.cityStoreNoper.ELeMe[cityName].toFixed(0);
                                BY_CITY_DATA[2][2][i] = returnData.cityStoreNoper.BaiduWaiMai[cityName].toFixed(0);
                                BY_CITY_DATA[2][3][i] = returnData.cityStoreNoTotal[i].value.toFixed(0);
                                BY_CITY_DATA[2][4][i] = cityName;
                            }

                        } catch (e) {
                            BY_CITY_DATA = [];
                        }
                    } else {
                        BY_CITY_DATA = [];
                    }
                    data({data: BY_CITY_DATA});
                }
            });
        } else {
            data({data: BY_CITY_DATA});
        }
    }

    //平台占比饼图生成
    function getPieCharts(startMonth, endMonth, cityTier, index) {
        //若未定义，则新建
        if (typeof echarts.getInstanceByDom(document.getElementById("platform")) === 'undefined') {
            myChart3 = echarts.init(document.getElementById("platform"))
        }

        var option = {};
        myChart3.clear();
        myChart3.setOption(option);

            myChart3.showLoading();
            getPieData(startMonth, endMonth, cityTier, function (data) {
            myChart3.hideLoading();
            if (BY_CHANNEL_DATA.length === 0) {
                noDataHandler(myChart3, $("#platform"));
                return;
            }
            var realData = BY_CHANNEL_DATA[index];
            var name = "", s = "";
            if (index == 0) {
                name = "客单数占比";
                s = "笔";
            } else if (index == 1) {
                name = "销售额占比";
                s = "元";
            } else {
                name = "店铺数占比";
                s = "家";
            }

            myChart3.clear();
            myChart3.setOption(
                    {
                        color: ['#f9c851', '#188ae2', '#ff5b5b'],
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var realValue = formatNum((params.value / 100).toFixed(0));
                                return params.seriesName + "<br/>" + params.name + " : " + realValue + " (" + params.percent + "%)"
                            }
                            //formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'right',
                            data: ['美团外卖', '饿了么', '百度外卖'],
                            tooltip: {
                                show: true,
                                formatter: '点击可选择不同渠道'
                            }
                        },
                        series: [
                            {
                                name: name,
                                type: 'pie',
                                radius: '65%',
                                center: ['50%', '50%'],
                                data: realData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        formatter: function (params) {
                                            var realValue = fitNum((params.value / 100).toFixed(0));
                                            return params.name + " : " + realValue + s+ "\n"+ "(" + params.percent + "%)";
                                        }
                                    }
                                }
                            }
                        ]
                    }
            );
        });
    }

    //获取平台占比饼图数据
    function getPieData(startMonth, endMonth, cityTier, data) {
        //若数据空，则发送请求获取数据
        if (BY_CHANNEL_DATA.length === 0) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_by_indexchannel?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + cityTier,
                //async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            console.log(returnData);
                            if (JSON.stringify(returnData.channelTCper) === '{}'
                                    || JSON.stringify(returnData.channelGMVper) === '{}') {
                                data({data: BY_CHANNEL_DATA});
                                return;
                            }
                            BY_CHANNEL_DATA[0] = [
                                {value: (returnData.channelTCper.MeiTuan * 100).toFixed(decimals_num), name: '美团外卖'},
                                {value: (returnData.channelTCper.ELeMe * 100).toFixed(decimals_num), name: '饿了么'},
                                {value: (returnData.channelTCper.BaiduWaiMai * 100).toFixed(decimals_num), name: '百度外卖'}
                            ];
                            BY_CHANNEL_DATA[1] = [
                                {value: (returnData.channelGMVper.MeiTuan * 100).toFixed(decimals_num), name: '美团外卖'},
                                {value: (returnData.channelGMVper.ELeMe * 100).toFixed(decimals_num), name: '饿了么'},
                                {
                                    value: (returnData.channelGMVper.BaiduWaiMai * 100).toFixed(decimals_num),
                                    name: '百度外卖'
                                }
                            ];
                            BY_CHANNEL_DATA[2] = [
                                {
                                    value: (returnData.channelStoreNoper.MeiTuan * 100).toFixed(decimals_num),
                                    name: '美团外卖'
                                },
                                {value: (returnData.channelStoreNoper.ELeMe * 100).toFixed(decimals_num), name: '饿了么'},
                                {
                                    value: (returnData.channelStoreNoper.BaiduWaiMai * 100).toFixed(decimals_num),
                                    name: '百度外卖'
                                }
                            ];
                        } catch (e) {
                            BY_CHANNEL_DATA = [];
                            //return;
                        }
                    } else {
                        BY_CHANNEL_DATA = [];
                    }
                    data({data: BY_CHANNEL_DATA});
                }
            });
        } else {
            data({data: BY_CHANNEL_DATA});
        }
    }

    //品类占比柱状图生成
    function getBarCharts(startMonth, endMonth, cityTier, index, cateType) {
        //若未定义，则新建
        if (typeof echarts.getInstanceByDom(document.getElementById("shops")) === 'undefined') {
            myChart5 = echarts.init(document.getElementById("shops"))
        }

        var option = {};
        myChart5.clear();
        myChart5.setOption(option);

        myChart5.showLoading();
        getBarData(startMonth, endMonth, cityTier, cateType, function (data) {
            myChart5.hideLoading();
            if (BY_SUBCATE_DATA.length === 0) {
                noDataHandler(myChart5, $('#shops'));
                return;
            }

            var real_data = [], cateName = [], firstCateName = [];
            for (var i = 0; i < BY_SUBCATE_DATA[index].length; i++) {
                real_data[i] = BY_SUBCATE_DATA[index][i].value;
                cateName[i] = BY_SUBCATE_DATA[index][i].cate_name;
                try {
                    firstCateName[i] = BY_SUBCATE_DATA[index][i].first_cate_name;
                } catch (e) {
                    firstCateName = [];
                }
            }
            var name = "";
            if (index == 0) {
                name = "客单数占比：";
            } else if (index == 1) {
                name = "销售额占比：";
            } else {
                name = "店铺数占比：";
            }

            myChart5.clear();
            myChart5.setOption(
                    {
                        color: ['#b71515'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter: function (params) {
                                if (typeof firstCateName[0] !== 'undefined') {
                                    return '大类：' + firstCateName[params[0].dataIndex]
                                            + '<br>细分类：' + cateName[params[0].dataIndex]
                                            + '<br>' + name + params[0].data + "%";
                                } else {
                                    return '大类：' + cateName[params[0].dataIndex]
                                            + '<br>' + name + params[0].data + "%";
                                }
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '8%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: cateName,
                                axisTick: {
                                    alignWithLabel: true
                                },
                                axisLabel: {
                                    interval: 0,
                                    rotate: 45//倾斜度 -90 至 90 默认为0
                                },
                                name: "品类"
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                splitLine: false,
                                name: '百分比(%)'
                            }
                        ],
                        series: [
                            {
                                name: '品类占比',
                                type: 'bar',
                                barWidth: '60%',
                                data: real_data

                            }
                        ]
                    }
            );
            myChart5.on('click', function (params) {
                TIP_DATA = {
                    cateName: params.name,
                    type: name
                };
                $('#myModalLabel').html(params.name + ' 过去12个月' + name.substring(0, 3) + '趋势');
                $('#myModal').modal('show');
            });
        });
    }

    //获取品类占比柱状图数据
    function getBarData(startMonth, endMonth, cityTier, cateType, data) {
        //若数据空，则发送请求获取数据
        if (BY_SUBCATE_DATA.length === 0) {
            $.ajax({
                type: "GET",
                url: "/service/data/get_overview_result_by_subcategory?start_month=" + startMonth + "&end_month=" + endMonth
                + "&city_tier=" + cityTier + "&category_tier=" + cateType,
                //async: false,
                success: function (res) {
                    if (res.code === "suc") {
                        try {
                            var returnData = res.data;
                            console.log(returnData);
                            BY_SUBCATE_DATA[0] = [];
                            BY_SUBCATE_DATA[1] = [];
                            BY_SUBCATE_DATA[2] = [];
                            if (cateType === 1 || cateType === '1') {
                                if (returnData.subCategoryTC.length === 0 || returnData.subCategoryGMV.length === 0
                                        || returnData.subCategoryStore.length === 0) {
                                    BY_SUBCATE_DATA = [];
                                    data({data: BY_SUBCATE_DATA});
                                    return;
                                }
                                for (var i = 0; i < returnData.subCategoryTC.length; i++) {
                                    BY_SUBCATE_DATA[0][i] = {
                                        value: (returnData.subCategoryTC[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryTC[i].cate_name
                                    }
                                }
                                for (var i = 0; i < returnData.subCategoryGMV.length; i++) {
                                    BY_SUBCATE_DATA[1][i] = {
                                        value: (returnData.subCategoryGMV[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryGMV[i].cate_name
                                    }
                                }
                                for (var i = 0; i < returnData.subCategoryStore.length; i++) {
                                    BY_SUBCATE_DATA[2][i] = {
                                        value: (returnData.subCategoryStore[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryStore[i].cate_name
                                    }
                                }
                            } else {
                                if (returnData.subCategoryTC.length === 0 || returnData.subCategoryGMV.length === 0
                                        || returnData.subCategoryStore.length === 0) {
                                    BY_SUBCATE_DATA = [];
                                    data({data: BY_SUBCATE_DATA});
                                    return;
                                }
                                //var index1 = 0, index2 = 0, index3 = 0;
                                //for (var ii = 0; ii < returnData.cateNames.length; ii++) {
                                //var cateName = returnData.cateNames[ii];
                                for (var i = 0; i < returnData.subCategoryTC.length; i++) {
                                    BY_SUBCATE_DATA[0][i] = {
                                        value: (returnData.subCategoryTC[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryTC[i].cate_name,
                                        first_cate_name: returnData.subCategoryTC[i].first_cate_name
                                    }
                                    //index1 = index1 + 1;
                                }
                                for (var i = 0; i < returnData.subCategoryGMV.length; i++) {
                                    BY_SUBCATE_DATA[1][i] = {
                                        value: (returnData.subCategoryGMV[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryGMV[i].cate_name,
                                        first_cate_name: returnData.subCategoryGMV[i].first_cate_name
                                    }
                                    //index2 = index2 + 1;
                                }
                                for (var i = 0; i < returnData.subCategoryStore.length; i++) {
                                    BY_SUBCATE_DATA[2][i] = {
                                        value: (returnData.subCategoryStore[i].value * 100).toFixed(decimals_num),
                                        cate_name: returnData.subCategoryStore[i].cate_name,
                                        first_cate_name: returnData.subCategoryStore[i].first_cate_name
                                    }
                                    //index3 = index3 + 1;
                                }
                                //}
                            }
                        } catch (e) {
                            BY_SUBCATE_DATA = [];
                            //return [];
                        }
                    } else {
                        BY_SUBCATE_DATA = [];
                    }
                    data({data: BY_SUBCATE_DATA});
                }
            });
        } else {
            data({data: BY_SUBCATE_DATA});
        }
    }

    //网红菜品
    function getWangHongProduct(index) {
        var wangHongProductInfo = '';
        if (index == 0) {
            wangHongProductInfo = '<div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p1.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>红糖糍粑</span><br>' +
                    '                                            <span>总销售额：￥1,560</span><br>' +
                    // '                                            <span>价格区间：￥22-￥25</span><br>' +
                    '                                            <span>销售店铺：A店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">红糖糍粑</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p2.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>红糖冰粉</span><br>' +
                    '                                            <span>总销售额：￥1,260</span><br>' +
                    // '                                            <span>价格区间：￥15-￥18</span><br>' +
                    '                                            <span>销售店铺：B店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">红糖冰粉</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p3.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>成都担担面</span><br>' +
                    '                                            <span>总销售额：￥1,060</span><br>' +
                    // '                                            <span>价格区间：￥25-￥28</span><br>' +
                    '                                            <span>销售店铺：C店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">成都担担面</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p5.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>馋嘴牛蛙</span><br>' +
                    '                                            <span>总销售额：￥1,560</span><br>' +
                    // '                                            <span>价格区间：￥60-￥63</span><br>' +
                    '                                            <span>销售店铺：D店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">馋嘴牛蛙</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p1.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>红糖糍粑</span><br>' +
                    '                                            <span>总销售额：￥1,560</span><br>' +
                    // '                                            <span>价格区间：￥22-￥25</span><br>' +
                    '                                            <span>销售店铺：E店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">红糖糍粑</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" src="../assets/images/p2.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption clearfix" style="background-color: #6a6a6ac9">' +
                    '                                            <span>红糖冰粉</span><br>' +
                    '                                            <span>总销售额：￥1,260</span><br>' +
                    // '                                            <span>价格区间：￥15-￥18</span><br>' +
                    '                                            <span>销售店铺：F店铺</span>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">红糖冰粉</p>' +
                    '                                </div><!-- END column -->';
        } else {
            wangHongProductInfo =
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/俄式红肠双鸡堡.png" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                           <h6><span>俄式红肠双鸡堡</span><br>' +
                    '                                            <span>总销售额：253.65万元</span><br>' +
                    // '                                            <span>价格区间：￥15-￥18</span><br>' +
                    '                                            <span>品牌：麦当劳\n</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">俄式红肠双鸡堡</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/朗姆芝士烤鸡堡.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                            <h6><span>朗姆芝士烤鸡堡</span><br>' +
                    '                                            <span>总销售额：161.24万元</span><br>' +
                    // '                                            <span>价格区间：￥25-￥28</span><br>' +
                    '                                            <span>品牌：汉堡王</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">朗姆芝士烤鸡堡</p>' +
                    '                                </div><!-- END column -->' +
                    '									<div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/朝天椒脆皮霸王翅.png" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                            <h6><span>朝天椒脆皮霸王翅</span><br>' +
                    '                                            <span>总销售额：297.86万元</span><br>' +
                    // '                                            <span>价格区间：￥22-￥25</span><br>' +
                    '                                            <span>品牌：汉堡王</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">朝天椒脆皮霸王翅</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/油泼辣子脆皮鸡.png" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                            <h6><span>油泼辣子脆皮鸡</span><br>' +
                    '                                            <span>总销售额：356.01万元</span><br>' +
                    // '                                            <span>价格区间：￥15-￥18</span><br>' +
                    '                                            <span>品牌：肯德基</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">油泼辣子脆皮鸡</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/火烤菠萝堡.jpg" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                            <h6><span>火烤菠萝堡</span><br>' +
                    '                                            <span>总销售额：181.80万元</span><br>' +
                    // '                                            <span>价格区间：￥22-￥25</span><br>' +
                    '                                            <span>品牌：汉堡王</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">火烤菠萝堡</p>' +
                    '                                </div><!-- END column -->' +
                    '                                <div class="col-sm-6 col-md-2">' +
                    '                                    <a href="javascript:void(0)" class="product">' +
                    '                                        <img class="img-responsive" style="height:150px;width:200px" src="../assets/images/overview/芝士瀑布汉堡.png" alt="oroduct image">' +
                    '                                        <div class="product-caption2 clearfix">' +
                    '                                            <h6><span>芝士瀑布汉堡</span><br>' +
                    '                                            <span>总销售额：360.85万元</span><br>' +
                    // '                                            <span>价格区间：￥60-￥63</span><br>' +
                    '                                            <span>品牌：Let\'s BURGER plus</span></h6>' +
                    '                                        </div><!-- .product-caption -->' +
                    '                                    </a><!-- .product -->' +
                    '<p style="text-align:center;">芝士瀑布汉堡</p>' +
                    '                                </div><!-- END column -->';


        }

        document.getElementById('wanghong').innerHTML = wangHongProductInfo;
    }

    //销量折线图中的月度搜索方法
    function SearchMonth(val) {
        var startMonth = $("#start_date").val();
        var endMonth = $("#end_date").val();
        var cityTier = $("#cityTier_select").val();
        if (startMonth === '' || endMonth === '') {
            startMonth = new Date().Format("yyyyMM");
            endMonth = new Date().Format("yyyyMM");
        }
        MONTHLY_SALES_DATA = [];
        var index = 0;
        widget1Btn.each(function () {
            if ($(this).hasClass('button_active')) {
                var eleHtml = $(this).html().replace(/\s+/g, "");
                if (eleHtml === '店铺数') {
                    index = 2;
                } else if (eleHtml === '销售额') {
                    index = 1;
                } else {
                    index = 0;
                }
            }
        });
        getSalesCharts(startMonth, endMonth, cityTier, index, val);
    }

    function buildTable(cityTier, start_month, end_month) {

        $.ajax({
            type: "GET",
            url: "/service/data/getOverviewResultbyCitySubTier?cityTier=" + cityTier + "&start_time=" + start_month + "&end_time=" + end_month,
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    try {
                        //母表数据（ajax返回结果,需排序）
                        var rowData = res.data.cate;//格式：[['QSR','Total','1000','50'],[]]
                        //子表数据（ajax返回结果,需排序）
                        var subRowData = res.data.subCate
                        //1.表头数据
                        var titles = ['品类', '细分品类', '店铺数(家)', '客单数(万笔)', '客单数%', '客单数增长率%','客单数同比%','销售额(亿元)', '销售额占比%', '客单价（元）'];
                        var tooltip_title="点击查看过去十二个月的趋势"
                        // buildTables($("#table_div"),titles,rowData, subRowData, "店铺数(家)",1,true)
                        $("#table_div").buildTables({
                            "titles":titles,
                            "rowData":rowData,
                            "subRowData":subRowData,
                            "sortTitle":"店铺数(家)",
                            "desc":1,
                            "tooltip":true,
                            "tooltip_title":tooltip_title
                        });
                    } catch (e) {
                        console.info(e);
                    }
                }
            }
        });
    }

    //点击查看过去十二个月的趋势
    function showLastData(cate) {
        var sub_title = cate.split("_")
        var city_name = $("#cityTier_select").val();
        var mydate = $("#end_date").val();
        var url = ""
        CATE_TYPE = sub_title[0];
        switch (sub_title[0]) {
            case "1":
                url = "/service/data/getOverviewResultTrendbyCitySeTier?city=" + city_name + "&end_time=" + mydate
                        + "&section=" + sub_title[1]
                break;
            case "2":
                url = "/service/data/getOverviewResultTrendbyCityCaTier?city=" + city_name + "&end_time=" + mydate
                        + "&category=" + sub_title[1]
                break;
            case "3":
                url = "/service/data/getOverviewResultTrendbyCitySuTier?city=" + city_name + "&end_time=" + mydate
                        + "&suCategory=" + sub_title[1]
                break;
        }
        $.ajax({
            type: "GET",
            url: url,
            async: false,
            success: function (res) {
                if (res.code === "suc") {
                    CATEGORY_TREND = res.data;
                    $('#myModalLabel2').html(sub_title[1] + ' 过去12个月的趋势');
                    $('#myModal2').modal('show');
                }
            }
        });
    }

    function getCategoryChart(index, cate) {
        myChart4 = echarts.init(document.getElementById("category2"));

        var cate_data = [];
        var month_list = [];

        var data_name;
        switch (cate) {
            case "1":
                if (index == 0) {
                    data_name = "sectionTC";
                } else if (index == 1) {
                    data_name = "sectionSalesValue";
                } else if (index == 2) {
                    data_name = "sectionStoreNo";
                } else {
                    data_name = "sectionTA";
                }
                break;
            case "2":
                if (index == 0) {
                    data_name = "categoryTC";
                } else if (index == 1) {
                    data_name = "categorySalesValue";
                } else if (index == 2) {
                    data_name = "categoryStoreNo";
                } else {
                    data_name = "categoryTA";
                }
                break;
            case "3":
                if (index == 0) {
                    data_name = "suCategoryTC";
                } else if (index == 1) {
                    data_name = "subCategorySalesValue";
                } else if (index == 2) {
                    data_name = "suCategoryStoreNo";
                } else {
                    data_name = "suCategoryTA";
                }
                break;

        }

        for (var i = 0; i < CATEGORY_TREND.length; i++) {
            var val_unit;
            var data = new Number(CATEGORY_TREND[i][data_name]);
            if (index == 0 || index == 2) {
                cate_data[i] = data.toFixed(0);
            } else {
                cate_data[i] = data.toFixed(2);
            }
            month_list[i] = CATEGORY_TREND[i]["yearMonth"].toString().substring(0, 4)
                    + "-" + CATEGORY_TREND[i]["yearMonth"].toString().substring(4, 6);
        }


        var xName = "";
        if (index == 0) {
            xName = "客单数(笔)";
        } else if (index == 1) {
            xName = "销售额(元)";
        } else if (index == 2) {
            xName = "店铺数(家)";
        } else {
            xName = "客单价(元)";
        }

        var option = {
            color: ['#ba1b20'],
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                x: 100
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: month_list,
                name: "月份"
            },
            yAxis: {
                type: 'value',
                splitLine: false,
                name: xName
            },
            series: [
                {
                    name: '数值',
                    type: 'line',
                    data: cate_data,
                    lineStyle: {
                        width: 3
                    }
                }
            ]
        };

        myChart4.clear();
        myChart4.setOption(option);

    }



</script>
<script>

    $(document).ready(function () {
        //echarts画出的是canvas，窗口变动后需要重绘
        window.onresize = function () {
            var myChart1 = echarts.getInstanceByDom(document.getElementById("sales"));
            var myChart2 = echarts.getInstanceByDom(document.getElementById("city"));
            var myChart3 = echarts.getInstanceByDom(document.getElementById("platform"));
            var myChart4 = echarts.init(document.getElementById("category"));
            // var myChart5 = echarts.getInstanceByDom(document.getElementById("shops"));
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart4.resize();
            // myChart5.resize();
        }
    });

</script>
<script type="text/javascript" src='../res/myassets/js/sorttable.js'></script>
</body>
</html>